<style>
	.ua-demo-loaders .item{
		float:left;
		margin:10px;
		text-align: center;
	}
	.loader-container{
		position: relative;
		width:200px;
		height:200px;
	}
</style>
<div class="ua-demo-loaders" ua-demo-loaders>
	<div class="clearfix">
		<div class="item loader-container" id="ua-loader-flipdot">
			<span>flipDot</span>
		</div>
		<div class="item loader-container" id="ua-loader-fourdots">
			<span>fourdots</span>
		</div>
		<div class="item loader-container" id="ua-loader-bokeh">
			<span>bokeh</span>
		</div>
		<div class="item loader-container" id="ua-loader-kiri">
			<span>kiri</span>
		</div>
		<div class="item loader-container" id="ua-loader-sail">
			<span>sail</span>
		</div>
		<div class="item loader-container" id="ua-loader-squarepuls">
			<span>squarePuls</span>
		</div>
		<div class="item loader-container" id="ua-loader-breath">
			<span>breath</span>
		</div>
		<div class="item loader-container" id="ua-loader-stroke">
			<span>stroke</span>
		</div>
		
		
		<div class="item loader-container" id="ua-loader-wave">
			<span>wave</span>
		</div>
		<div class="item loader-container" id="ua-loader-orbit">
			<span>orbit</span>
		</div>
		<!-- <div class="item loader-container" id="ua-loader-liquidsquare">
			<span>liquidSquare</span>
		</div> -->
	</div>
	<header>
		<coding lan="javascript">
app.directive('uaDemoLoaders',['$uaLoader',function($uaLoader){
	return function($scope,elm,attrs){
		var circleContainer = document.getElementById('ua-loader-stroke');
		var circleLoader = $uaLoader({
			container: circleContainer,
		});

		var liquidsquare = $uaLoader({
			container: document.getElementById('ua-loader-liquidsquare'),
			theme:'liquidSquare',
		});
		
		var fourdots = $uaLoader({
			container: document.getElementById('ua-loader-fourdots'),
			theme: 'fourdots'
		})
		// fourdots.show(), fourdots.hide([delay=0]), fourdots.remove()
	}
	...
}])
		</coding>
	</header>
</div>

